<template>
  <view class="container">
    <!--搜索栏-->
    <u-sticky style="top: 0" offset-top="0">
      <view class="search-wrap">
        <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick" />
      </view>
    </u-sticky>

    <!--轮播图-->
    <banner v-if="bannerList.length > 0" :banner-list="bannerList" />

    <u-gap height="20px" />

    <!--宫格菜单按钮-->
    <u-grid v-if="menuList.length > 0" col="5">
      <u-grid-item v-for="(item, index) in menuList" :key="index" @click="open">
        <image class="grid-img" :src="item.icon" />
        <text class="grid-title">{{ item.name }}</text>
      </u-grid-item>
    </u-grid>

    <!--消息滚动栏-->
    <u-gap height="5px" />
    <u-notice-bar v-if="noticeList" style="padding: 12rpx 12rpx" :text="noticeList" mode="link" direction="column" @click="click" />

    <!-- 券列表 -->
    <couponListMm v-if="proMmFlag" ref="couponList" />
    <couponListXgl v-else-if="proXglFlag" ref="couponList" />
  </view>
</template>

<script>
import website from '@/const/website'
import banner from '@/components/Banner/banner'
import couponListMm from '@/components/couponList/couponListMm'
import couponListXgl from '@/components/couponList/couponListXgl'
import { sign, appSettingList } from '@/api/api1'
export default {
  components: {
    banner,
    couponListMm,
    couponListXgl
  },
  data() {
    return {
      bannerList: [],
      menuList: [],
      noticeList: [],
      couponList: [],
      proMmFlag: false,
      proXglFlag: false
    }
  },
  watch: {},
  onLoad() {
    this.proMmFlag = website.projectType === 'mm'
    this.proXglFlag = website.projectType === 'xgl'
    this.loadData()
  },
  onPullDownRefresh() {
    this.loadData()
    this.$refs.couponList.refresh()
  },
  onShow() {
    // 主要优化从券操作页面跳回来之后，刷新库存数据
    this.$nextTick(() => {
      this.$refs.couponList.refresh()
    })
  },
  onReachBottom() {
    this.$nextTick(() => {
      this.$refs.couponList.pageing()
    })
  },
  methods: {
    handleSearchClick(e) {
      uni.$u.route('/pages/goods/searchPage/searchPage')
    },
    loadData() {
      appSettingList({ type: 2, status: true }).then(res => {
        this.menuList = res.data
      })
      appSettingList({ type: 1, status: true }).then(res => {
        this.bannerList = res.data.map(item => {
          return {
            id: item.id,
            title: item.name,
            url: item.icon
          }
        })
      })
      appSettingList({ type: 3, status: true }).then(res => {
        this.noticeList = res.data.map(item => {
          return item.name
        })
      })
    },
    open(i) {
      if (!this.$store.getters.hasLoginAndHasMallInfo) {
        return uni.$u.route('/pages/users/login/index')
      }
      if (this.menuList[i].link.split('/').splice(-2)[0] === 'sign') {
        // 签到
        sign({ mobile: this.$store.getters.userInfo.phone }).then(res => {
          if (!res) return
          uni.$u.toast('签到成功')
        })
        return
      }
      uni.$u.route(this.menuList[i].link)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrap {
  background: $custom-bg-color;
  padding: 20rpx;
}

.grid-img {
  width: 80rpx;
  height: 80rpx;
}
.grid-title {
  line-height: 50rpx;
  font-size: 24rpx;
}
</style>
